<template>
  <div>
    <Card style="height: 240px; padding: 12px 12px 0px">
      <div class="head-title">基本信息</div>
      <div class="detail-body">
        <div class="ant-col-md-6">
          <div class="info">
            <div class="head-info">
              <Avatar size="large" :src="memberInfo.face" />
              <div>
                <div
                  class="name"
                  v-if="memberInfo.username && memberInfo.username.length > 15"
                >
                  {{ memberInfo.username.slice(0, 15) }}...
                </div>
                <div class="name" v-else>
                  {{ memberInfo.username }}
                </div>
                <div class="phone">
                  {{ memberInfo.mobile }}
                </div>
              </div>
            </div>
            <div class="bottom-info">
              <p>上次登录 {{ memberInfo.lastLoginDate }}&nbsp;</p>
              <p>
                <i-switch
                  size="large"
                  v-model="memberInfo.disabled"
                  :true-value="true"
                  :false-value="false"
                  @on-change="memberStatusChange"
                >
                  <span slot="open">启用</span>
                  <span slot="close">禁用</span>
                </i-switch>
              </p>
            </div>
          </div>
        </div>
        <div class="ant-col-md-6">
          <p class="item">
            <span class="label">昵称：</span>
            <span class="info">{{ memberInfo.nickName }}</span>
          </p>
          <p class="item">
            <span class="label">会员名称：</span>
            <span class="info">{{ memberInfo.username }}</span>
          </p>
          <p class="item">
            <span class="label">性别：</span>
            <span v-if="memberInfo.sex === 1" class="info">男</span>
            <span v-else class="info">女</span>
          </p>
          <p class="item">
            <span class="label">生日：</span>
            <span
              v-if="
                memberInfo.birthday == null ||
                memberInfo.birthday == 'undefined'
              "
              >暂未完善</span
            >
            <span v-else class="info">{{ memberInfo.birthday }}</span>
          </p>
          <p class="item">
            <span class="label">地区：</span>
            <span
              v-if="
                memberInfo.region == null ||
                memberInfo.region == '' ||
                memberInfo.region === 'undefined'
              "
              class="info"
              >暂未完善</span
            >
            <span v-else class="info">{{ memberInfo.region }}</span>
          </p>
          <p class="item">
            <span class="label">注册时间：</span>
            <span class="info">{{ memberInfo.createTime }}</span>
          </p>
        </div>
      </div>
    </Card>

    <Card class="mt_10">
      <Tabs value="order" @on-click="memberInfoChange">
        <!-- <TabPane label="TA的积分" name="point">
          <div class="pointsTitle" style="justify-content: flex-start; text-align: left;">
            <div style="width: 120px;">
              <div class="points-top-title">
                剩余积分
              </div>
              <div class="points-top-text">
                {{memberInfo.point?memberInfo.point:0}}
              </div>
            </div>
          </div>
          <div class="point-data" style="margin-top: -5px">
              <Table
                :loading="loading"
                border
                :columns="pointsColumns"
                :data="pointData"
                class="mt_10"
                ref="table"
              >
              </Table>

            <Row type="flex" justify="end" class="mt_10" style="margin-top: 10px">
              <Page
                :current="pointSearchForm.pageNumber"
                :total="pointTotal"
                :page-size="pointSearchForm.pageSize"
                @on-change="pointChangePage"
                @on-page-size-change="pointChangePageSize"
                :page-size-opts="[10, 20, 50]"
                size="small"
                show-total
                show-elevator
                show-sizer
              ></Page>
            </Row>
          </div>
        </TabPane> -->
        <TabPane label="TA的订单" name="order" style="min-height: 200px">
          <Row>
            <Form
              ref="searchForm"
              :model="orderSearchForm"
              inline
              :label-width="70"
              class="search-form"
            >
              <Form-item label="订单号" prop="orderSn">
                <Input
                  type="text"
                  v-model="orderSearchForm.orderSn"
                  placeholder="请输入订单号"
                  clearable
                  style="width: 200px"
                />
              </Form-item>
              <Form-item label="订单状态" prop="orderStatus">
                <Select
                  v-model="orderSearchForm.orderStatus"
                  placeholder="请选择"
                  clearable
                  style="width: 200px"
                >
                  <Option value="UNPAID">未付款</Option>
                  <Option value="PAID">已付款</Option>
                  <Option value="UNDELIVERED">待发货</Option>
                  <Option value="DELIVERED">已发货</Option>
                  <Option value="COMPLETED">已完成</Option>
                  <Option value="TAKE">待核验</Option>
                  <Option value="CANCELLED">已关闭</Option>
                </Select>
              </Form-item>
              <Form-item label="支付状态" prop="payStatus">
                <Select
                  v-model="orderSearchForm.payStatus"
                  placeholder="请选择"
                  clearable
                  style="width: 200px"
                >
                  <Option value="UNPAID">未付款</Option>
                  <Option value="PAID">已付款</Option>
                </Select>
              </Form-item>
              <Form-item label="订单类型" prop="orderType">
                <Select
                  v-model="orderSearchForm.orderType"
                  placeholder="请选择"
                  clearable
                  style="width: 200px"
                >
                  <Option value="NORMAL">普通订单</Option>
                  <Option value="VIRTUAL">虚拟订单</Option>
                  <Option value="GIFT">赠品订单</Option>
                  <Option value="PINTUAN">拼团订单</Option>
                </Select>
              </Form-item>
              <Form-item label="订单来源" prop="clientType">
                <Select
                  v-model="orderSearchForm.clientType"
                  placeholder="请选择"
                  clearable
                  style="width: 200px"
                >
                  <Option value="H5">移动端</Option>
                  <Option value="PC">PC端</Option>
                  <Option value="WECHAT_MP">小程序</Option>
                  <Option value="APP">移动应用端</Option>
                  <Option value="UNKNOWN">未知</Option>
                </Select>
              </Form-item>
              <Form-item label="下单时间">
                <DatePicker
                  v-model="selectDate"
                  type="datetimerange"
                  format="yyyy-MM-dd HH:mm:ss"
                  clearable
                  @on-change="selectDateRange"
                  placeholder="选择起始时间"
                  style="width: 200px"
                ></DatePicker>
              </Form-item>
              <Button
                @click="getOrderData"
                type="primary"
                icon="ios-search"
                class="search-btn"
                >搜索</Button
              >
            </Form>
          </Row>
          <div style="min-height: 180px">
            <Table
              :loading="loading"
              border
              :columns="orderColumns"
              :data="orderData"
              ref="table"
              class="mt_10"
            >
            </Table>

            <Row
              type="flex"
              justify="end"
              class="mt_10"
              style="margin-top: 10px"
            >
              <Page
                :current="orderSearchForm.pageNumber"
                :total="orderTotal"
                :page-size="orderSearchForm.pageSize"
                @on-change="orderChangePage"
                @on-page-size-change="orderChangePageSize"
                :page-size-opts="[10, 20, 50]"
                size="small"
                show-total
                show-elevator
                show-sizer
              ></Page>
            </Row>
          </div>
        </TabPane>
        <TabPane label="TA收货地址" name="address">
          <Row class="operation padding-row">
            <Button @click="addMemberAddress" type="primary">新增</Button>
          </Row>
          <Table
            :loading="loading"
            border
            :columns="addressColumns"
            :data="addressData"
            ref="table"
            class="mt_10"
            sortable="custom"
          >
          </Table>

          <Row type="flex" justify="end" class="mt_10" style="margin-top: 10px">
            <Page
              :current="addressSearchForm.pageNumber"
              :total="addressTotal"
              :page-size="addressSearchForm.pageSize"
              @on-change="addressChangePage"
              @on-page-size-change="addressChangePageSize"
              :page-size-opts="[10, 20, 50]"
              size="small"
              show-total
              show-elevator
              show-sizer
            ></Page>
          </Row>
        </TabPane>
        <TabPane label="TA的提货券" name="wallet">
          <div
            class="pointsTitle"
            style="justify-content: flex-start; text-align: left"
          >
            <div style="min-width: 120px; margin-right: 20px">
              <div class="points-top-title">提货券</div>

              <div class="points-top-text">
                <priceColorScheme
                  :value="memberWalletInfo.memberWallet"
                  :color="$mainColor"
                  :customer="{ fontSize: '21px' }"
                  unit=""
                >
                </priceColorScheme>
              </div>
            </div>
            <div style="min-width: 120px">
              <div class="points-top-title">冻结提货券</div>
              <div class="points-top-text">
                <priceColorScheme
                  :value="memberWalletInfo.memberFrozenWallet"
                  :color="$mainColor"
                  :customer="{ fontSize: '21px' }"
                  unit=""
                >
                </priceColorScheme>
              </div>
            </div>
            <div style="min-width: 120px; margin-right: 20px">
              <Button
                type="primary"
                @click="increaseMoney"
                style="margin-right: 20px"
                >增加提货券</Button
              >
              <Button type="primary" @click="reduceMondy">减少提货券</Button>
            </div>
          </div>
          <Table
            :loading="loading"
            border
            :columns="walletColumns"
            :data="walletData"
            ref="table"
            class="mt_10"
          >
          </Table>

          <Row type="flex" justify="end" class="mt_10" style="margin-top: 10px">
            <Page
              :current="walletSearchForm.pageNumber"
              :total="walletTotal"
              :page-size="walletSearchForm.pageSize"
              @on-change="walletChangePage"
              @on-page-size-change="walletChangePageSize"
              :page-size-opts="[10, 20, 50]"
              size="small"
              show-total
              show-elevator
              show-sizer
            ></Page>
          </Row>
        </TabPane>
        <TabPane label="TA的发票" name="receipt">
          <Row>
            <Form
              ref="searchForm"
              :model="receiptRecordSearchForm"
              inline
              :label-width="70"
              class="search-form"
            >
              <Form-item label="订单号" prop="orderSn">
                <Input
                  type="text"
                  v-model="receiptRecordSearchForm.orderSn"
                  placeholder="请输入订单号"
                  clearable
                  style="width: 200px"
                />
              </Form-item>
              <Button
                @click="getReceiptRecordData"
                type="primary"
                icon="ios-search"
                class="search-btn"
                >搜索</Button
              >
            </Form>
          </Row>
          <Table
            :loading="loading"
            border
            :columns="receiptRecordColumns"
            :data="receiptRecordData"
            class="mt_10"
            ref="table"
          >
            <template slot="orderSnSlot" slot-scope="scope">
              <a @click="orderDetail(scope.row.orderSn)">{{
                scope.row.orderSn
              }}</a>
            </template>
          </Table>

          <Row type="flex" justify="end" class="mt_10" style="margin-top: 10px">
            <Page
              :current="receiptRecordSearchForm.pageNumber"
              :total="receiptRecordTotal"
              :page-size="receiptRecordSearchForm.pageSize"
              @on-change="walletChangePage"
              @on-page-size-change="walletChangePageSize"
              :page-size-opts="[10, 20, 50]"
              size="small"
              show-total
              show-elevator
              show-sizer
            ></Page>
          </Row>
        </TabPane>
        <TabPane label="TA的贡献值" name="contribution">
          <div
            class="pointsTitle"
            style="justify-content: flex-start; text-align: left"
          >
            <div style="min-width: 120px; margin-right: 20px">
              <div class="points-top-title">贡献值</div>

              <div class="points-top-text">
                <priceColorScheme
                  :value="contributionInfo.contribution"
                  :color="$mainColor"
                  :customer="{ fontSize: '21px' }"
                >
                </priceColorScheme>
              </div>
            </div>
            <div style="min-width: 120px">
              <div class="points-top-title">冻结贡献值</div>
              <div class="points-top-text">
                <priceColorScheme
                  :value="contributionInfo.frozenContribution"
                  :color="$mainColor"
                  :customer="{ fontSize: '21px' }"
                >
                </priceColorScheme>
              </div>
            </div>
          </div>
          <Table
            :loading="loading"
            border
            :columns="contributionColumns"
            :data="contributionData"
            ref="table"
            class="mt_10"
          >
          </Table>

          <Row type="flex" justify="end" class="mt_10" style="margin-top: 10px">
            <Page
              :current="contributionSearchForm.pageNumber"
              :total="contributionTotal"
              :page-size="contributionSearchForm.pageSize"
              @on-change="contributionChangePage"
              @on-page-size-change="contributionChangePageSize"
              :page-size-opts="[10, 20, 50]"
              size="small"
              show-total
              show-elevator
              show-sizer
            ></Page>
          </Row>
        </TabPane>
        <TabPane label="TA的等级" name="grade">
          <div
            class="pointsTitle"
            style="justify-content: flex-start; text-align: left"
          >
            <div style="min-width: 120px; margin-right: 20px">
              <div class="points-top-title">当前等级</div>

              <div class="points-top-text">
                <span :style="{ 'font-size': '16px', color: $mainColor }">{{
                  memberInfo.gradeName
                }}</span>
              </div>
            </div>
          </div>
          <Table
            :loading="loading"
            border
            :columns="gradeColumns"
            :data="gradeData"
            ref="table"
            class="mt_10"
          >
          </Table>

          <Row type="flex" justify="end" class="mt_10" style="margin-top: 10px">
            <Page
              :current="gradeSearchForm.pageNumber"
              :total="gradeTotal"
              :page-size="gradeSearchForm.pageSize"
              @on-change="gradeChangePage"
              @on-page-size-change="gradeChangePageSize"
              :page-size-opts="[10, 20, 50]"
              size="small"
              show-total
              show-elevator
              show-sizer
            ></Page>
          </Row>
        </TabPane>
        <TabPane label="TA的团队" name="members">
          <team :memberId="id" ref="team"></team>
        </TabPane>
        <TabPane label="TA的金豆" name="goldenBean">
          <goldenBean :staticParams="{memberId: id}" ref="goldenBean"></goldenBean>
        </TabPane>
      </Tabs>
    </Card>
    <Modal
      :title="addressModalTitle"
      v-model="addressModalVisible"
      :mask-closable="false"
      :width="500"
    >
      <Form
        ref="addressForm"
        :model="addressForm"
        :label-width="100"
        :rules="addressFormValidate"
      >
        <FormItem label="收货人姓名" prop="name">
          <Input
            v-model="addressForm.name"
            maxlength="8"
            clearable
            style="width: 80%"
          />
        </FormItem>
        <FormItem label="收货人手机" prop="mobile">
          <Input
            v-model="addressForm.mobile"
            clearable
            style="width: 80%"
            maxlength="11"
          />
        </FormItem>
        <FormItem label="收货人地址" prop="consigneeAddressPath">
          <span>{{ addressForm.consigneeAddressPath || "暂无地址" }}</span>
          <Button @click="$refs.map.open()" style="margin-left: 10px"
            >选择</Button
          >
        </FormItem>
        <FormItem label="详细地址" prop="detail">
          <Input
            v-model="addressForm.detail"
            maxlength="35"
            clearable
            style="width: 80%"
          />
        </FormItem>
        <FormItem label="地址别名" prop="alias">
          <Input
            v-model="addressForm.alias"
            clearable
            style="width: 80%"
            maxlength="8"
          />
        </FormItem>
        <FormItem label="默认" prop="isDefault">
          <RadioGroup
            type="button"
            button-style="solid"
            v-model="addressForm.isDefault"
          >
            <Radio :label="1">是</Radio>
            <Radio :label="0">否</Radio>
          </RadioGroup>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="addressModalVisible = false">取消</Button>
        <Button type="primary" :loading="submitLoading" @click="addressSubmit"
          >保存</Button
        >
      </div>
    </Modal>
    <multipleMap ref="map" @callback="getAddress"></multipleMap>
    <walletDialog
      ref="wallet-dialog"
      :memberId="id"
      :reload="reloadWallet"
    ></walletDialog>
  </div>
</template>

<script>
import * as API_Member from "@/api/member.js";
import ossManage from "@/views/sys/oss-manage/ossManage";
import multipleMap from "@/components/map/multiple-map";
import * as RegExp from "@/libs/RegExp.js";
import * as API_Order from "@/api/order.js";
import gradeMixins from "./mixins/gradeData";
import walletMixins from "./mixins/wallet";
import walletDialog from "./components/walletDialog.vue";
import team from "./components/team.vue";
import goldenBean from "./components/goldenBean.vue";
import { getDictByKey } from "@/libs/dictStorage";

export default {
  name: "memberDetail",
  mixins: [gradeMixins, walletMixins],
  components: {
    ossManage,
    multipleMap,
    walletDialog,
    team,
    goldenBean,
  },
  data() {
    return {
      id: "", //会员id
      loading: true, // 表单加载状态
      memberInfo: {}, //会员信息
      memberWalletInfo: {}, //会员预存款信息
      contributionInfo: {}, // 贡献值信息
      addressModalTitle: "", //会员地址操作标题
      addressModalVisible: false, //会员地址操作弹出框
      addressForm: {
        id: "",
        isDefault: 0,
        consigneeAddressPath: "",
        consigneeAddressIdPath: "",
      }, //会员地址操作form
      selectDate: null, // 选择时间段
      submitLoading: false, // 添加或编辑提交状态
      addressFormValidate: {
        name: [{ required: true, message: "收货人姓名不能为空" }],
        mobile: [
          { required: true, message: "请输入收货人手机号码" },
          {
            pattern: RegExp.mobile,
            message: "请输入正确的手机号",
          },
        ],
        consigneeAddressPath: [
          { required: true, message: "收货人地址不能为空" },
        ],
        detail: [{ required: true, message: "收货人详细地址不能为空" }],
        alias: [{ required: true, message: "收货人地址别名不能为空" }],
      }, //会员地址操作表单校验
      //历史积分表格
      pointsColumns: [
        {
          title: "操作内容",
          key: "content",
          minWidth: 120,
          tooltip: true,
        },
        {
          title: "操作时间",
          key: "createTime",
          width: 200,
        },
        {
          title: "之前积分",
          key: "beforePoint",
          width: 150,
        },
        {
          title: "变动积分",
          key: "variablePoint",
          width: 150,
          render: (h, params) => {
            if (params.row.pointType == "INCREASE") {
              return h("priceColorScheme", {
                props: {
                  value: params.row.variablePoint,
                  color: "green",
                  unit: "+",
                },
              });
            } else {
              return h("priceColorScheme", {
                props: {
                  value: params.row.variablePoint,
                  color: this.$mainColor,
                  unit: "-",
                },
              });
            }
          },
        },
        {
          title: "当前积分",
          key: "point",
          width: 150,
        },
      ],
      pointData: [], //历史积分数据
      pointTotal: 0, //历史积分总条数
      //历史积分数据查询form
      pointSearchForm: {
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
      },
      orderColumns: [
        {
          title: "订单编号",
          key: "sn",
          minWidth: 100,
          tooltip: true,
        },
        {
          title: "订单金额",
          key: "flowPrice",
          width: 130,
          render: (h, params) => {
            return h("priceColorScheme", {
              props: { value: params.row.flowPrice, color: this.$mainColor },
            });
          },
        },
        {
          title: "订单类型",
          key: "orderType",
          width: 100,
          render: (h, params) => {
            if (params.row.orderType == "NORMAL") {
              return h("div", [h("span", {}, "普通订单")]);
            } else if (params.row.orderType == "VIRTUAL") {
              return h("div", [h("span", {}, "虚拟订单")]);
            } else if (params.row.orderType == "GIFT") {
              return h("div", [h("span", {}, "赠品订单")]);
            } else if (params.row.orderType == "PINTUAN") {
              return h("div", [h("span", {}, "拼团订单")]);
            }
          },
        },
        {
          title: "来源",
          key: "clientType",
          width: 80,
          render: (h, params) => {
            if (params.row.clientType == "H5") {
              return h("div", {}, "移动端");
            } else if (params.row.clientType == "PC") {
              return h("div", {}, "PC端");
            } else if (params.row.clientType == "WECHAT_MP") {
              return h("div", {}, "小程序端");
            } else if (params.row.clientType == "APP") {
              return h("div", {}, "移动应用端");
            } else {
              return h("div", {}, params.row.clientType);
            }
          },
        },
        {
          title: "订单状态",
          key: "orderStatus",
          width: 95,
          render: (h, params) => {
            if (params.row.orderStatus == "UNPAID") {
              return h("div", [h("span", {}, "未付款")]);
            } else if (params.row.orderStatus == "PAID") {
              return h("div", [h("span", {}, "已付款")]);
            } else if (params.row.orderStatus == "UNDELIVERED") {
              return h("div", [h("span", {}, "待发货")]);
            } else if (params.row.orderStatus == "DELIVERED") {
              return h("div", [h("span", {}, "已发货")]);
            } else if (params.row.orderStatus == "COMPLETED") {
              return h("div", [h("span", {}, "已完成")]);
            } else if (params.row.orderStatus == "TAKE") {
              return h("div", [h("span", {}, "待核验")]);
            } else if (params.row.orderStatus == "CANCELLED") {
              return h("div", [h("span", {}, "已关闭")]);
            }
          },
        },
        {
          title: "支付状态",
          key: "payStatus",
          width: 95,
          render: (h, params) => {
            if (params.row.payStatus == "UNPAID") {
              return h("div", [h("span", {}, "未付款")]);
            } else if (params.row.payStatus == "PAID") {
              return h("div", [h("span", {}, "已付款")]);
            }
          },
        },
        {
          title: "售后状态",
          key: "groupAfterSaleStatus",
          width: 100,
          render: (h, params) => {
            if (params.row.groupAfterSaleStatus == "NEW") {
              return h("div", [h("span", {}, "未申请")]);
            } else if (params.row.groupAfterSaleStatus == "NOT_APPLIED") {
              return h("div", [h("span", {}, "未申请")]);
            } else if (params.row.groupAfterSaleStatus == "ALREADY_APPLIED") {
              return h("div", [h("span", {}, "已申请")]);
            } else if (params.row.groupAfterSaleStatus == "EXPIRED") {
              return h("div", [h("span", {}, "已失效")]);
            }
          },
        },
        {
          title: "投诉状态",
          key: "groupComplainStatus",
          width: 95,
          render: (h, params) => {
            if (params.row.groupComplainStatus == "NEW") {
              return h("div", [h("span", {}, "未申请")]);
            } else if (params.row.groupComplainStatus == "NO_APPLY") {
              return h("div", [h("span", {}, "未申请")]);
            } else if (params.row.groupComplainStatus == "APPLYING") {
              return h("div", [h("span", {}, "申请中")]);
            } else if (params.row.groupComplainStatus == "COMPLETE") {
              return h("div", [h("span", {}, "已完成")]);
            } else if (params.row.groupComplainStatus == "EXPIRED") {
              return h("div", [h("span", {}, "已失效")]);
            } else if (params.row.groupComplainStatus == "CANCEL") {
              return h("div", [h("span", {}, "取消投诉")]);
            }
          },
        },
        {
          title: "购买店铺",
          key: "storeName",
          width: 120,
          tooltip: true,
        },
        {
          title: "下单时间",
          key: "createTime",
          width: 170,
        },
        {
          title: "操作",
          key: "action",
          align: "center",
          width: 100,
          fixed: "right",
          render: (h, params) => {
            return h(
              "div",
              {
                style: {
                  display: "flex",
                  justifyContent: "center",
                },
              },
              [
                h(
                  "Button",
                  {
                    props: {
                      type: "info",
                      size: "small",
                    },
                    style: {
                      marginRight: "5px",
                    },
                    on: {
                      click: () => {
                        this.orderDetail(params.row.sn);
                      },
                    },
                  },
                  "查看"
                ),
              ]
            );
          },
        },
      ],
      orderData: [], //订单数据
      orderTotal: 0, //订单总条数
      //TA的订单form
      orderSearchForm: {
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
        payStatus: "",
        orderSn: "",
        orderType: "",
      },
      addressColumns: [
        {
          title: "地址别名",
          key: "alias",
          minWidth: 80,
          tooltip: true,
        },
        {
          title: "收货人姓名",
          key: "name",
          minWidth: 90,
          tooltip: true,
        },
        {
          title: "收货人电话",
          key: "mobile",
          width: 125,
        },

        {
          title: "地址",
          key: "consigneeAddressPath",
          minWidth: 160,
          tooltip: true,
        },
        {
          title: "详细地址",
          key: "detail",
          minWidth: 180,
          tooltip: true,
        },
        {
          title: "默认",
          key: "isDefault",
          width: 80,
          render: (h, params) => {
            if (params.row.isDefault) {
              return h("div", [h("span", {}, "是")]);
            } else {
              return h("div", [h("span", {}, "否")]);
            }
          },
        },
        {
          title: "操作",
          key: "action",
          align: "center",
          width: 120,
          fixed: "right",
          render: (h, params) => {
            return h(
              "div",
              {
                style: {
                  display: "flex",
                  justifyContent: "center",
                },
              },
              [
                h(
                  "Button",
                  {
                    props: {
                      type: "error",
                      size: "small",
                    },
                    style: {
                      marginRight: "5px",
                    },
                    on: {
                      click: () => {
                        this.memberAddressRemove(params.row);
                      },
                    },
                  },
                  "删除"
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "info",
                      size: "small",
                    },
                    style: {
                      marginRight: "5px",
                    },
                    on: {
                      click: () => {
                        this.editAddress(params.row);
                      },
                    },
                  },
                  "编辑"
                ),
              ]
            );
          },
        },
      ],
      addressData: [], //历史积分数据
      addressTotal: 0, //历史积分总条数
      //TA的收货地址form
      addressSearchForm: {
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
      },
      //消费记录
      walletColumns: [
        {
          title: "会员名称",
          key: "memberName",
          minWidth: 120,
        },
        {
          title: "业务类型",
          key: "serviceType",
          width: 200,
          render: (h, params) => {
            const txt = getDictByKey(
              "depositServiceType",
              params.row.serviceType
            );
            return h("div", [h("span", {}, txt)]);
          },
        },
        {
          title: "变动数额",
          key: "money",
          width: 150,
          render: (h, params) => {
            if (params.row.money > 0) {
              return h("priceColorScheme", {
                props: { value: params.row.money, color: "green", unit: "" },
              });
            } else if (params.row.money < 0) {
              return h("priceColorScheme", {
                props: {
                  value: params.row.money,
                  color: this.$mainColor,
                  unit: "",
                },
              });
            }
          },
        },
        {
          title: "变动时间",
          key: "createTime",
          width: 170,
        },
        {
          title: "变动明细",
          key: "detail",
          minWidth: 400,
          tooltip: true,
        },
      ],
      //贡献值记录
      contributionColumns: [
        {
          title: "会员名称",
          key: "memberName",
          minWidth: 120,
        },
        {
          title: "业务类型",
          key: "serviceType",
          width: 200,
          render: (h, params) => {
            let showText = "";
            if (params.row.serviceType) {
              showText = getDictByKey(
                "depositServiceType",
                params.row.serviceType
              );
            }
            return h("div", [h("span", {}, showText)]);
          },
        },
        {
          title: "变动金额",
          key: "money",
          width: 150,
          render: (h, params) => {
            if (params.row.money > 0) {
              return h("priceColorScheme", {
                props: { value: params.row.money, color: "green", unit: "" },
              });
            } else if (params.row.money < 0) {
              return h("priceColorScheme", {
                props: {
                  value: params.row.money,
                  color: this.$mainColor,
                  unit: "",
                },
              });
            }
          },
        },
        {
          title: "变动时间",
          key: "createTime",
          width: 170,
        },
        {
          title: "变动明细",
          key: "detail",
          minWidth: 400,
          tooltip: true,
        },
      ],
      //TA的余额消费记录
      walletSearchForm: {
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
        sort: "createTime", // 默认排序字段
        order: "desc", // 默认排序方式
      },
      //TA的贡献值记录
      contributionSearchForm: {
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
        sort: "createTime", // 默认排序字段
        order: "desc", // 默认排序方式
      },
      walletData: [], //历史积分数据
      walletTotal: 0, //历史积分总条数
      contributionData: [], //历史贡献值数据
      contributionTotal: 0, //历史贡献值总条数
      //TA的发票记录
      receiptRecordSearchForm: {
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
        sort: "createTime", // 默认排序字段
        order: "desc", // 默认排序方式
      },
      receiptRecordColumns: [
        {
          title: "订单编号",
          key: "orderSn",
          width: 260,
          slot: "orderSnSlot",
        },
        {
          title: "发票抬头",
          key: "receiptTitle",
          minWidth: 130,
          tooltip: true,
        },
        {
          title: "纳税人识别号",
          key: "taxpayerId",
          minWidth: 130,
          tooltip: true,
        },
        {
          title: "发票金额",
          key: "receiptPrice",
          width: 130,
          render: (h, params) => {
            if (params.row.receiptPrice == null) {
              return h("priceColorScheme", {
                props: { value: 0, color: this.$mainColor },
              });
            } else {
              return h("priceColorScheme", {
                props: {
                  value: params.row.receiptPrice,
                  color: this.$mainColor,
                },
              });
            }
          },
        },
        {
          title: "发票内容",
          key: "receiptContent",
          minWidth: 120,
          tooltip: true,
        },
      ],
      receiptRecordData: [], //发票记录数据
      receiptRecordTotal: 0, //发票记录总条数
    };
  },
  methods: {
    init() {
      //查询会员信息
      this.getMemberInfo();
      //查询会员的历史积分数据
      this.getPointData();
    },
    reloadWallet() {
      this.getMemberWalletData();
      this.getDepositLogData();
    },
    //会员信息tab改变事件
    memberInfoChange(v) {
      if (v == "point") {
        this.getPointData();
      }
      if (v == "address") {
        this.getAddressData();
      }
      if (v == "order") {
        this.getOrderData();
      }
      if (v == "wallet") {
        this.getMemberWalletData();
        this.getDepositLogData();
      }
      if (v == "receipt") {
        this.getReceiptRecordData();
      }
      if (v == "contribution") {
        this.getContribution();
        this.getContributionLog();
      }
      if (v == "grade") {
        this.getGradeLog();
      }
      if (v == "members") {
        this.$refs.team.reload();
      }
      if (v == "goldenBean") {
        this.$refs.goldenBean.reload();
      }
    },
    //查询会员信息
    getMemberInfo() {
      API_Member.getMemberInfoData(this.id).then((res) => {
        res.result.gradeName = this.gradeLevels[res.result.gradeId];
        this.$set(this, "memberInfo", res.result);
      });
    },
    //会员状态改变事件
    memberStatusChange(v) {
      let params = {
        memberIds: [this.id],
        disabled: v,
      };
      API_Member.updateMemberStatus(params).then((res) => {});
    },
    //查询TA的余额disabled
    getMemberWalletData() {
      this.loading = true;
      let params = {
        memberId: this.id,
      };
      API_Member.getMemberWallet(params).then((res) => {
        this.loading = false;
        if (res.success) {
          this.memberWalletInfo = res.result;
        }
      });
      this.loading = false;
    },
    //查询TA的余额消费记录
    getDepositLogData() {
      this.loading = true;
      this.walletSearchForm.memberId = this.id;
      API_Member.getUserWallet(this.walletSearchForm).then((res) => {
        this.loading = false;
        if (res.success) {
          this.walletData = res.result.records;
          this.walletTotal = res.result.total;
        }
      });
      this.loading = false;
    },
    //查询TA的贡献值
    getContribution() {
      this.loading = true;
      let params = {
        memberId: this.id,
      };
      API_Member.getContribution(params).then((res) => {
        this.loading = false;
        if (res.success) {
          this.contributionInfo = res.result;
        }
      });
      this.loading = false;
    },
    //查询TA的贡献值日志
    getContributionLog() {
      this.loading = true;
      this.contributionSearchForm.memberId = this.id;
      API_Member.getContributionLog(this.contributionSearchForm).then((res) => {
        this.loading = false;
        if (res.success) {
          this.contributionData = res.result.records;
          this.contributionTotal = res.result.total;
        }
      });
      this.loading = false;
    },

    //查询TA的发票记录
    getReceiptRecordData() {
      this.loading = true;
      this.receiptRecordSearchForm.memberId = this.id;
      API_Order.getReceiptPage(this.receiptRecordSearchForm).then((res) => {
        this.loading = false;
        if (res.success) {
          this.receiptRecordData = res.result.records;
          this.receiptRecordTotal = res.result.total;
        }
      });
      this.loading = false;
    },

    //查询TA的订单
    getOrderData() {
      this.loading = true;
      this.orderSearchForm.memberId = this.id;
      API_Order.getOrderList(this.orderSearchForm).then((res) => {
        this.loading = false;
        if (res.success) {
          this.orderData = res.result.records;
          this.orderTotal = res.result.total;
        }
      });
      this.loading = false;
    },
    //跳转到订单详情页面
    orderDetail(v) {
      this.$router.push({
        name: "order-detail",
        query: { sn: v },
      });
    },
    //查询TA的历史积分数据
    getPointData() {
      this.loading = true;
      this.pointSearchForm.memberId = this.id;
      API_Member.getHistoryPointData(this.pointSearchForm).then((res) => {
        this.loading = false;
        if (res.success) {
          this.pointData = res.result.records;
          this.pointTotal = res.result.total;
        }
      });
      this.loading = false;
    },
    //新增TA的收货地址
    addMemberAddress() {
      this.addressModalTitle = "新增会员地址";
      this.addressModalVisible = true;
      this.addressForm = {
        id: "",
        isDefault: 0,
      };
    },
    //修改TA的收货地址
    editAddress(v) {
      this.addressModalTitle = "修改会员地址";
      this.addressForm = JSON.parse(JSON.stringify(v));
      this.addressForm.isDefault = v.isDefault ? 1 : 0;
      // this.$set(this, "addressForm", v);
      delete this.addressForm.updateTime;
      this.addressModalVisible = true;
    },
    //新增或者修改表单提交
    addressSubmit() {
      this.addressForm.memberId = this.id;
      this.$refs.addressForm.validate((valid) => {
        if (valid) {
          this.submitLoading = true;
          let submit = JSON.parse(JSON.stringify(this.addressForm));
          submit.isDefault
            ? (submit.isDefault = true)
            : (submit.isDefault = false);
          if (submit.id != "") {
            //修改地址
            API_Member.editMemberAddress(submit).then((res) => {
              this.submitLoading = false;
              if (res && res.success) {
                this.$Message.success("修改成功");
                this.addressModalVisible = false;
                this.getAddressData();
              }
            });
          } else {
            //添加地址
            API_Member.addMemberAddress(submit).then((res) => {
              this.submitLoading = false;
              if (res && res.success) {
                this.$Message.success("添加成功");
                this.addressModalVisible = false;
                this.getAddressData();
              }
            });
          }
        }
      });
    },
    //获取地址
    getAddress(val) {
      if (val.type === "select") {
        const paths = val.data.map((item) => item.name).join(",");
        const ids = val.data.map((item) => item.id).join(",");

        this.$set(this.addressForm, "consigneeAddressPath", paths);
        this.$set(this.addressForm, "consigneeAddressIdPath", ids);

        // 解析center 转为经纬度
        const coord = val.data[val.data.length - 1].center.split(",");
        this.addressForm.lat = coord[1];
        this.addressForm.lon = coord[0];
      } else {
        this.$set(this.addressForm, "consigneeAddressPath", val.data.addr);
        this.$set(this.addressForm, "consigneeAddressIdPath", val.data.addrId);
        this.addressForm.lat = val.data.position.lat;
        this.addressForm.lon = val.data.position.lng;
      }
    },
    //删除会员地址
    memberAddressRemove(v) {
      this.$Modal.confirm({
        title: "删除",
        content: "<p>确定要删除此收货地址？</p>",
        onOk: () => {
          API_Member.removeMemberAddress(v.id).then((res) => {
            if (res.success) {
              this.$Message.success("删除成功");
              this.getAddressData();
            }
          });
        },
      });
    },
    //查询TA的收货地址
    getAddressData() {
      this.loading = true;
      API_Member.getMemberAddressData(this.id, this.addressSearchForm).then(
        (res) => {
          this.loading = false;
          if (res.success) {
            this.addressData = res.result.records;
            this.addressTotal = res.result.total;
          }
        }
      );
      this.loading = false;
    },
    //积分记录页数变化
    pointChangePage(v) {
      this.pointSearchForm.pageNumber = v;
      this.getPointData();
    },
    //积分记录页数变化
    pointChangePageSize(v) {
      this.pointSearchForm.pageNumber = 1;
      this.pointSearchForm.pageSize = v;
      this.getPointData();
    },
    //会员地址记录页数变化
    addressChangePage(v) {
      this.addressSearchForm.pageNumber = v;
      this.getAddressData();
    },
    //会员地址记录页数变化
    addressChangePageSize(v) {
      this.addressSearchForm.pageNumber = 1;
      this.addressSearchForm.pageSize = v;
      this.getPointData();
    },

    //余额记录页数变化
    walletChangePage(v) {
      this.walletSearchForm.pageNumber = v;
      this.getDepositLogData();
    },
    //余额记录页数变化
    contributionChangePageSize(v) {
      this.contributionSearchForm.pageNumber = 1;
      this.contributionSearchForm.pageSize = v;
      this.getDepositLogData();
    },
    //余额记录页数变化
    contributionChangePage(v) {
      this.contributionSearchForm.pageNumber = v;
      this.getDepositLogData();
    },
    //余额记录页数变化
    walletChangePageSize(v) {
      this.walletSearchForm.pageNumber = 1;
      this.walletSearchForm.pageSize = v;
      this.getDepositLogData();
    },

    //订单记录页数变化
    orderChangePage(v) {
      this.orderSearchForm.pageNumber = v;
      this.getOrderData();
    },
    //订单记录页数变化
    orderChangePageSize(v) {
      this.orderSearchForm.pageNumber = 1;
      this.orderSearchForm.pageSize = v;
      this.getOrderData();
    },
    // 起止时间从新赋值
    selectDateRange(v) {
      if (v) {
        this.orderSearchForm.startDate = v[0];
        this.orderSearchForm.endDate = v[1];
      }
    },
  },

  mounted() {
    this.id = this.$route.query.id;
    this.init();
  },
};
</script>
<style lang="scss" scoped>
@import "memberDetail.scss";
</style>
